<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="true">
      <p slot="content" style="margin-left: -12px">余额提现</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-demo">
          <p style="display: inline-block;font-size: 14px;color: #636363;">我的余额: &nbsp;<span>￥{{balance}}</span></p>
          <p style="display: inline-block;float: right;padding-right: 5px;font-size: 14px;color: #636363;">可提现余额: &nbsp;<span>￥{{balance}}</span></p>
        </div></flexbox-item>
      </flexbox>
      <cell gutter="0" style="padding: 0"></cell>
      <flexbox :gutter="0" wrap="nowrap">
        <flexbox-item><div class="flex-demo">
          <p style="font-size: 14px;color: #636363;">本月剩余: &nbsp;可提现次数<span>{{lastTimes}}</span>次</p>
        </div></flexbox-item>
      </flexbox>
      <cell gutter="0" style="padding: 0"></cell>
      <flexbox :gutter="0" wrap="nowrap">
        <flexbox-item><div class="flex-demo">
          <p style="font-size: 14px;color: #636363;">总提现余额: &nbsp;<span>￥{{totalWithdraw}}</span></p>
        </div></flexbox-item>
      </flexbox>
      <cell gutter="0" style="padding: 0"></cell>
      <flexbox :gutter="0">
        <flexbox-item :span="3.9"><div class="flex-tip">
          <p style="font-size: 14px;color: #636363;">提现金额:<span>¥</span></p>
        </div></flexbox-item>
        <flexbox-item><div>
          <x-input v-model="cashMoney" type="number" placeholder="5元起提" @on-change="checkMoneyFn"></x-input>
        </div></flexbox-item>
      </flexbox>
      <cell gutter="0" style="padding: 5px 0"></cell>
      <flexbox :gutter="0">
        <flexbox-item>
          <div class="flex-cash" v-if="isShowTips!==true">
            <p style="font-size: 14px;color: #636363;">账户余额:¥<span>{{balance}}</span><span id="balanceAll" @click="balanceFn">全部提现</span></p>
          </div>
          <div class="flex-cash" v-if="isShowTips===true">
            <p><span id="balanceTips">输入金额超过零钱余额</span></p>
          </div>
        </flexbox-item>
      </flexbox>
    </group>
    <x-button v-if="cashIsDisable===true" disabled @click.native="balancePromptFn" action-type="button" style="width: 200px;margin-top: 20px;font-size: 15px;">提现</x-button>
    <x-button v-if="cashIsDisable!==true" type="primary" @click.native="balancePromptFn" action-type="button" style="width: 200px;margin-top: 20px;background: #3d82e5;font-size: 15px;">提现</x-button>
    <flexbox>
      <flexbox-item>
        <group gutter="0" style="margin-top: 20px;">
          <div class="flex-rule">
            <p style="text-align: center;font-size: 12px;color: #636363;line-height: 26px;padding-top: 12px;">余额提现规则</p>
            <ul style="font-size: 12px;color: #aaa9a9;line-height: 26px;padding-bottom: 50px;">
              <li>1、仅会员才可进行余额提现，提现金额将直接打入微信钱包中;</li>
              <li>2、每个会员每月仅可提现2次，2次提现时间间隔大于7天;</li>
              <li>3、提现可选用以下2种方式，单次提现均不超过100元:
                <ul style="margin-left: 10px;">
                  <li>(1)&nbsp;提现金额为5的整数倍，最低5元起提;</li>
                  <li>(2)&nbsp;提取余额账户中全部金额;</li>
                </ul>
              </li>
              <li>4、每次提现申请发出后，账户中申请部分金额不能再使用，后台审核通过后，提现金额转至用户微信钱包，若未通过，则返还至余额账户;</li>
              <li>5、如有更多需要，联系客服;</li>
            </ul>
          </div></group></flexbox-item>
    </flexbox>
  </div>
</template>

<script>
  import { Group, Cell, XButton, XInput, Flexbox, FlexboxItem, Alert, AlertPlugin } from 'vux'
  import * as urls from '../../../../api/urls'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      XInput,
      Flexbox,
      FlexboxItem,
      Alert,
      AlertPlugin,
      YqHeader
    },
    data () {
      return {
        show: false,
        message: '',
        isShowTips: false,
        balance: '',
        cashMoney: '',
        cashIsDisable: true,
        cashPiont: 800,
        piontAll: 123456,
        cashNumber: 2,
        lastTimes: 0,
        totalWithdraw: 0,
        balancePara: {
          times: 2,
          perMax: 100
        }
      }
    },
    methods: {
      onHide () {
        if (this.message === '提现申请已提交，提现金额将在3个工作日内到账') {
          this.$router.go(-1) // 回到我的余额页面
        }
      },
      onShow () {
      },
      getCashMoney () {
        this.cashMoney = parseInt(this.cashInvitation / 20)
      },
      balancePromptFn () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        that.http(urls.withdrawApply, {userId: userId, balance: that.cashMoney}, function (res) {
          if (res.status === 100) {
            that.show = true
            that.message = '提现申请已提交，提现金额将在3个工作日内到账'
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      checkMoneyFn () {
        if (this.cashMoney !== '') {
          if (this.cashMoney > this.balance) {
            this.isShowTips = true
            this.cashIsDisable = true
          } else {
            this.isShowTips = false
            this.cashIsDisable = false
          }
        } else {
          this.isShowTips = false
          this.cashIsDisable = true
        }
      },
      balanceFn () {
        this.cashMoney = this.balance
        this.cashIsDisable = false
      },
      withDraw () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        that.http(urls.withDraw, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.balance = res.data.balance
            that.lastTimes = res.data.lastTimes
            that.totalWithdraw = res.data.totalWithdraw
            that.balancePara = res.data.balancePara
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      weixinfn11 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.withDraw()
      this.weixinfn11()
    }
  }
</script>

<style scoped="scoped" lang="less">
  .flex-demo {
    background-clip: padding-box;
    height: 50px;
    margin-left: 10px;
  }
  .flex-demo > p {
    line-height: 50px;
  }
  .flex-demo > p > span{
    font-weight: bold;
  }
  .flex-cash{
    text-align: left;
    background-clip: padding-box;
  }
  .flex-rule{
    text-align: left;
    background-clip: padding-box;
    padding: 0 10px;
    color: grey;
  }
  .flex-cash > p{
    font-size: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
  }
  ul{
    list-style: none;
  }
  .flex-tip{
    margin-left: 10px;
    font-weight: bold;
  }
  .flex-tip >p> span{
    padding-left: 10px;
  }
  #balanceAll{
    padding-left: 10px;
    color: #3d82e5;
  }
  #balanceTips{
    padding-left: 10px;
    color: #fb2323;
  }
</style>
